import React, { memo, useEffect, useState } from 'react'
import { Image, Pagination } from 'antd'



// 引入 api 接口 
import { getTuijianGedan, getCatGedan } from '../../../api/gedanApi'
// 引入工具函数
import { getCount } from '../../../utils/format'
// 导入常量
import { PlaceholderImg, ImgError, GedanCat } from '../../../constant/local-constant'
import { MusicClubCategoryBox } from './style'
export default memo(function MusicClubCategory() {
  // state
  const [topList, setToplist] = useState([])
  const [query, setQuery] = useState({ cat: "全部", limit: 15, offset: 0 }) //  歌单(网友精选碟) 的一些查询参数
  const [total, setTotal] = useState(0)
  const [bottomList, setBottomList] = useState([])
  const [currentPage, setCurrentPage] = useState(1)
  // useEffct
  useEffect(() => {
    getTuijianGedan(10).then(res => {
      if (res.code === 200) {
        setToplist(res.result)
      }
    })

  }, [])
  useEffect(() => {
    getCatGedan(query).then(res => {
      setTotal(res.total)
      setBottomList(res.playlists)
    })
  }, [query])
  // others
  const catChange = (item) => {
    if (item != query.cat) {
      // 切换的时候，不仅要切换 cat ，还要切换 offset
      let newObj = { ...query }
      newObj.cat = item
      newObj.offset = 0
      setQuery(newObj)
      setCurrentPage(1)
    }
  }

  // 分页的页面 改变的时候 执行的函数
  const pageChange = (page, pageSize) => {
    console.log('页码值改变', page);
    let newObj = { ...query }
    newObj.offset = (page - 1) * newObj.limit
    setQuery(newObj)
    setCurrentPage(page)

  }

  return (
    <MusicClubCategoryBox>
      <div className="wrap">
        <h2>推荐歌单</h2>
        <div className="itemBox">
          {
            topList.map(item => {
              return (
                <div className="item" key={item.id}>
                  <div className="pic">
                    <Image
                      width={224}
                      height={224}
                      src={item.picUrl}
                      preview={false}
                      fallback={ImgError}
                      placeholder={
                        <Image
                          preview={false}
                          width={224}
                          height={224}
                          src={PlaceholderImg}
                        />
                      }
                    />
                    <div className="pic_play"></div>
                  </div>
                  <div className="item_name one-txt-cut">{item.name}</div>
                  <div className="item_playCount">播放量:{getCount(item.playCount)}</div>
                </div>
              )
            })
          }
        </div>
        {/* 全部歌单，这里，要有一个 弹出框，供用户选择 一个分类 */}
        <h2>
          全部歌单
          {
            GedanCat.map((item, index) => {
              return (
                <span
                  className={item == query.cat ? "active" : ""}
                  onClick={e => { catChange(item) }}
                  key={index}
                >{item}</span>
              )
            })
          }
        </h2>
        <div className="itemBox">
          {
            bottomList.map(item => {
              return (
                <div className="item" key={item.id}>
                  <div className="pic">
                    <Image
                      width={224}
                      height={224}
                      src={item.coverImgUrl}
                      preview={false}
                      fallback={ImgError}
                      placeholder={
                        <Image
                          preview={false}
                          width={224}
                          height={224}
                          src={PlaceholderImg}
                        />
                      }
                    />
                    <div className="pic_play"></div>
                  </div>
                  <div className="item_name one-txt-cut">{item.name}</div>
                  <div className="item_playCount">播放量:{getCount(item.playCount)}</div>
                </div>
              )
            })
          }
        </div>
        <Pagination current={currentPage} total={total} showSizeChanger={false} onChange={pageChange} defaultPageSize={15} />
      </div>
    </MusicClubCategoryBox>
  )

})
